<template>
  <v-card>
    <v-layout>
      <v-navigation-drawer
        class="bg-blue-grey lighten-5"
        permanent
      >
        <v-list nav>
          <v-list-item
            :title="userName"
            prepend-avatar="@/assets/placeholder.jpg"
          ></v-list-item>
        </v-list>

        <v-divider></v-divider>
        <v-list nav>
          <v-list-item prepend-icon="mdi-home" title="首页" value="home" @click="toPage('HomePage')"></v-list-item>
          <v-list-item prepend-icon="mdi-map-marker" title="小动物地图" value="map"
                       @click="toPage('MapPage')"></v-list-item>
          <v-list-item prepend-icon="mdi-book-open" title="小动物图鉴" value="book"
                       @click="toPage('BookPage')"></v-list-item>
          <v-list-item prepend-icon="mdi-account" title="我的" value="my" @click="toPage('MyPage')"></v-list-item>
          <v-list-item prepend-icon="mdi-magnify" title="搜索" value="search"
                       @click="toPage('SearchPage')"></v-list-item>
        </v-list>

        <template v-if="user.$state.ShowButton" v-slot:append>
          <div class="pa-2">
            <v-row>
              <v-col>
                <v-btn @click="user.setLoginDialog(true)">
                  <v-icon
                    color="orange-darken-2"
                    icon="mdi-arrow-up-bold-box-outline"
                    size="large"
                  ></v-icon>
                  登录
                </v-btn>
              </v-col>
              <v-col>
                <v-btn @click="user.setRegisterDialog(true)">
                  <v-icon
                    color="blue-darken-2"
                    icon="mdi-message-text"
                    size="large"
                  ></v-icon>
                  注册
                </v-btn>
              </v-col>
            </v-row>
          </div>
        </template>
      </v-navigation-drawer>

      <!--登录-->
      <v-dialog v-if="user.$state.ShowButton" v-model="user.LoginDialog" width="800">
        <LoginPage/>
      </v-dialog>

      <!--注册-->
      <v-dialog v-if="user.$state.ShowButton" v-model="user.RegisterDialog" width="800">
        <RegisterPage/>
      </v-dialog>

      <v-main>
        <v-container>
          <router-view></router-view>
        </v-container>
      </v-main>
    </v-layout>
  </v-card>

</template>

<script lang="ts" setup>

import router from "@/router";
import RegisterPage from "@/components/RegisterPage.vue";
import LoginPage from "@/components/LoginPage.vue";
import {userStore} from "@/store/app";
import {computed} from "vue";

const user = userStore()

function toPage(destination: string) {
  router.push({name: destination})
}

const userName = computed(() => {
  return user.$state.UserName === '' ? '一个没有登录的用户' : user.$state.UserName
})

</script>
